<template>
  <div>
    <el-card>
      <div class="grid-content bg-purple">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="dangan">
              <label>订单编号：</label>
              <div style="color: rgba(138,138,138,0.56);display: inline-block" v-text="order.id"></div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="dangan">
              <label>下单时间：</label>
              <div style="color: rgba(138,138,138,0.56);display: inline-block" v-text="order.createTime"></div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="dangan">
              <label>订单状态：</label>
              <div style="color: rgba(138,138,138,0.56);display: inline-block">
                <span v-if="order.status === 1">待取件</span>
                <span v-if="order.status === 2">已取件</span>
                <span v-if="order.status === 3">网点入库</span>
                <span v-if="order.status === 4">待装车</span>
                <span v-if="order.status === 5">运输中</span>
                <span v-if="order.status === 6">网点出库</span>
                <span v-if="order.status === 7">待派送</span>
                <span v-if="order.status === 8">派送中</span>
                <span v-if="order.status === 9">已签收</span>
                <span v-if="order.status === 10">拒收</span>
                <span v-if="order.status === 11">已取消</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="dangan">
              <label>预计到达日期：</label>
              <div style="color: rgba(138,138,138,0.56);display: inline-block"
                   v-text="order.estimatedArrivalTime"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-divider></el-divider>
    <el-collapse v-model="activeNames">
      <el-card>
        <el-collapse-item title="基本信息" name="1">
          <template slot="title">
            <label class="i">基本信息</label><i class="header-icon el-icon-info"></i>
          </template>
          <basic v-bind:order="order"></basic>
        </el-collapse-item>
      </el-card>
      <br>
      <el-card>
        <el-collapse-item title="费用信息" name="2">
          <template slot="title">
            <label class="i">费用信息</label><i class="header-icon el-icon-info"></i>
          </template>
          <cost v-bind:order="order"></cost>
        </el-collapse-item>
      </el-card>
      <br>
      <el-card>
        <el-collapse-item title="货品信息" name="3">
          <template slot="title">
            <label class="i">货品信息</label><i class="header-icon el-icon-info"></i>
          </template>
          <goods v-bind:goods="goods"></goods>
        </el-collapse-item>
      </el-card>
      <br>
      <el-card>
        <el-collapse-item title="取件信息" name="4">
          <template slot="title">
            <label class="i">取件信息</label><i class="header-icon el-icon-info"></i>
          </template>
          <delivery v-bind:id="order.id"></delivery>
        </el-collapse-item>
      </el-card>
    </el-collapse>
    <el-divider></el-divider>
    <div class="button">
      <router-link to="/orderList">
        <el-button style="width: 200px;color: black">返回</el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
import './css/xiangqing.css'
import cost from './cost'
import goods from './goods'
import delivery from './delivery'
import basic from './basic'
import OrderAPI from '../../../../src/api/logisticsmanagement/ordermanagement/orderAPI'

export default {
  name: 'xiangqing',
  data() {
    return {
      activeNames: ['1', '2', '3', '4'],
      order: {
        id: '',
        createTime: '',
        status: 0,
        estimatedArrivalTime: ''
      },
      goods: []
    }
  },
  methods: {
    getOrderXQ() {
      OrderAPI.getOrderXQ(this.$route.query.id).then(({data}) => {
        if (data.data != null) {
          this.order = data.data.pdOrder
          this.goods = data.data.pdOrderCargo
        }
      })
    }
  },
  components: {
    cost, goods, delivery, basic
  },
  created() {
    this.getOrderXQ()
  }
}
</script>
<style>

</style>
